<script setup lang="ts">
import { ref } from "vue";
import LoginForm from "./components/LoginForm.vue";
import RegisterForm from "./components/RegisterForm.vue";
import LoginHeader from "./components/LoginHeader.vue";
import { ElCard } from "element-plus";
// 是否显示登录表单，否则显示注册表单
const isShowLogin = ref(true);

// 切换显示登录表单和注册表单
const changeForm = () => {
  isShowLogin.value = !isShowLogin.value;
};
</script>

<template>
  <div class="login">
    <LoginHeader />
    <ElCard>
      <LoginForm v-if="isShowLogin" @changeForm="changeForm" />
      <RegisterForm v-else @changeForm="changeForm" />
    </ElCard>
  </div>
</template>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}
</style>
